<template>
	<el-dialog title="新增加点方式" :visible.sync="show" :close-on-click-modal="false">
		<el-form label-width="100px">
			<el-form-item label="加价方式:">
				<el-checkbox v-model="checkbox.org" @change="changeChecked(1)">组织</el-checkbox>
				<!-- <el-checkbox v-model="checkbox.user" @change="changeChecked(2)">用户</el-checkbox> -->
				<el-checkbox v-model="checkbox.supplier" @change="changeChecked(4)">供应商</el-checkbox>
				<el-checkbox v-model="checkbox.category" @change="changeChecked(8)">分类</el-checkbox>
			</el-form-item>
			<el-form-item label="绑定组织:" v-if="checkbox.org">
				<el-cascader :options="list" clearable :props="orgListProps" size="mini" class="cascader"
					v-model="orgId"></el-cascader>
					<br>
				<el-select v-model="orgPointId" size="mini" filterable remote clearable >
					<el-option v-for="item in pointList" :key="item.id" :value="item.id" :label="calcPoint(item.point)">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="绑定用户:" v-if="checkbox.user">
				<el-select v-model="selectUser" size="mini" placeholder="请输入关键字" :remote-method="remoteMethod"
					filterable remote>
					<el-option v-for="item in userList" :key="item.id" :value="item.id" :label="item.name"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="绑定供应商:" v-if="checkbox.supplier" v-for="supplier, index in supplierPointList">
				<div class="supplier-box">
					<div class="item">
						<el-select v-model="supplier.supplierId" size="mini" placeholder="请输入关键字" filterable remote clearable >
							<el-option v-for="item in supplierList" :key="item.id" :value="item.id" :label="item.orgNameZh">
							</el-option>
						</el-select>
					</div>
					<div class="item">
						<el-select v-model="supplier.pointId" size="mini" filterable remote clearable >
							<el-option v-for="item in pointList" :key="item.id" :value="item.id" :label="calcPoint(item.point)">
							</el-option>
						</el-select>
					</div>
					<div class="item">
						<i class="el-icon-circle-plus add-supplier" v-if="index == supplierPointList.length - 1"
							@click="addSupplier(supplier.pointId)"></i>
						<i class="el-icon-remove add-supplier" v-if="supplierPointList.length > 1"
							@click="delSupplier(index)"></i>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="绑定分类:" v-if="checkbox.category">
				<el-cascader :options="categoryList" clearable :props="categoryListProps" size="mini" class="cascader" 
					collapse-tags v-model="categoryId">
				</el-cascader>
				<br>
				<el-select v-model="categoryPointId" size="mini" filterable remote clearable >
					<el-option v-for="item in pointList" :key="item.id" :value="item.id" :label="calcPoint(item.point)">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<span slot="footer">
			<el-button @click="show = false">取消</el-button>
			<el-button type="primary" @click="save">保存</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import { userList, cateTree, pointList, pointSetConfig } from '@/api/price.api'
	import { supplierAllList } from '@/api/supplierActivity/supplier'
	export default {
		name: "addPoint",
		data() {
			return {
				show: false,
				orgListProps: {
					checkStrictly: true,
					value: 'id',
					label: 'name'
				},
				categoryListProps: {
					multiple: true,
					checkStrictly: true,
					value: 'id',
					label: 'categoryName'
				},
				types: ['org', 'user', 'supplier', 'category'],
				pointType: 0,
				orgList: [],
				userList: [],
				supplierList: [],
				categoryList: [],
				pointList: [],
				orgId: '',
				supplierId: '',
				categoryId: [],
				orgPointId: '',
				supplierPointId: '',
				supplierPointList: [
					{
						supplierId: '',
						pointId: ''
					}
				],
				categoryPointId: '',
				user: {
					name: '',
					account: ''
				},
				selectUser: "",
				checkbox: {
					org: false,
					user: false,
					supplier: false,
					category: false
				}
			}
		},
		props: {
			type: {
				type: String,
				default: 'org'
			},
			target: {
				type: String,
				default: null
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		computed: {

		},
		mounted() {
			this.getPointList();
		},
		methods: {
			getOrgList() {

			},
			getUserList() {
				const params = {
					orgId: this.orgId,
					...this.user
				}
				if (this.user.name == '') return
				userList(params).then(res => {
					this.userList = res
				})
			},
			getCategotyList() {
				cateTree().then(res => {
					this.categoryList = res
				})
			},
			getSupplierList() {
				supplierAllList(this.supplierQueryParams).then(res => {
					this.supplierList = res.rows
				})
			},
			getPointList() {
				pointList({}).then(res => {
					this.pointList = res
				})
			},
			showDialog() {
				this.show = true
			},
			changeChecked(t) {
				this.pointType = this.pointType ^ t
			},
			isCheck(type) {
				return (this.pointType & type) == type
			},
			save() {
				if (this.pointType < 1) {
					this.$message.warning("至少选择一种加价方式")
					return false;
				}
				
				if (this.checkbox.org) {
					if(this.orgId == null || this.orgId == '') {
						this.$message.warning("还未选择组织")
						return false;
					}
					if(this.orgPointId == null || this.orgPointId == '') {
						this.$message.warning("还未选择组织加点")
						return false;
					}
				}
				if (this.checkbox.user) {
					
				}
				if (this.checkbox.supplier) {
					for(let i = 0; i< this.supplierPointList.length; i++) {
						const supplier = this.supplierPointList[i]
						console.log(supplier)
						if(supplier.supplierId == null || supplier.supplierId == '') {
							this.$message.warning("还未选择供应商")
							return false;
						}
						if(supplier.pointId == null || supplier.pointId == '') {
							this.$message.warning("还未选择供应商加点")
							return false;
						}
					}
				}
				if (this.checkbox.category) {
					if(this.categoryId.length == 0) {
						this.$message.warning("还未选择分类")
						return false;
					}
					if(this.categoryPointId == null || this.categoryPointId == '') {
						this.$message.warning("还未选择分类加点")
						return false;
					}
				}
				let categoryIds = [];
				this.categoryId.forEach(row => {
					categoryIds = [...categoryIds, ...row]
				})
				const param = {
					pointType: this.pointType,
					orgPoint: {
						orgId: this.orgId,
						pointId: this.orgPointId
					},
					supplierPoint: this.supplierPointList,
					categoryIds: categoryIds,
					categoryPointId: this.categoryPointId
				}
				pointSetConfig(param).then(res => {
					this.$message.success("添加成功")
					this.getPointList();
				})
			},
			remoteMethod(query) {
				if (query != '') {
					this.user.account = query
					this.user.name = query
					this.getUserList()
				}
			},
			calcPoint(point) {
				return (point/100).toFixed(2) + "%"
			},
			addSupplier(pointId) {
				this.supplierPointList.push({
					supplierId: "",
					pointId: pointId
				})
			},
			delSupplier(index) {
				this.supplierPointList.splice(index, 1)
			}
		},
		watch: {
			target: {
				handler(value) {
					this.$nextTick(() => {
						this.orgId = value
						if (this.orgId == null || this.orgId == '') {
							this.pointType = 0
						} else {
							this.pointType = 1
						}
					})
				},
				immediate: true
			},
			show: {
				handler(value) {
					if (value) {
						this.$nextTick(() => {
							if (this.orgId == null || this.orgId == '') {
								this.pointType = 0
							} else {
								this.pointType = 1
							}
							this.supplierPointList = [
								{
									supplierId: '',
									pointId: ''
								}
							]
						})
					}
				},
				immediate: true
			},
			list: {
				handler(value) {

				},
				immediate: true,
				deep: true
			},
			pointType: {
				handler(value) {
					if (this.isCheck(1)) {

					}
					if (this.isCheck(2)) {
						this.getUserList()
					}
					if (this.isCheck(4)) {
						this.getSupplierList()
					}
					if (this.isCheck(8)) {
						this.getCategotyList()
					}
					
					this.checkbox.org = this.isCheck(1)
					this.checkbox.user = this.isCheck(2)
					this.checkbox.supplier = this.isCheck(4)
					this.checkbox.category = this.isCheck(8)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.cascader {
		width: 50%;
	}

	.el-select {
		width: 50%;
	}
	
	.add-supplier{
		margin-left: 5px;
	}
	
	.supplier-box{
		display: flex;
		justify-content: left;
		
		.el-select {
			width: 80%;
		}
	}
</style>
